<template>
    <el-tabs v-model="mediaTab" type="card" height="100%">
        <el-tab-pane label="车辆照片" style="background: #000;" name="img">
            <el-carousel trigger="click" height="275px">
                <el-carousel-item v-for="item in images" :key="item">
                    <el-image
                        style="width: 100%; height: 100%;"
                        :src="item"
                        :z-index="9999"
                        :preview-src-list="images"
                        fit="contain" />
                </el-carousel-item>
            </el-carousel>
        </el-tab-pane>
        <el-tab-pane v-if="showVideo" label="预检视频" name="video">
            <div style="background: #000; height: 275px;">
                <video id="currentVideo" style="width: 100%; height: 100%;" controls autoplay>
                    <source :src="detailData.vehicleVideo||''" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>

<script>

export default {
    name: 'VehicleMedia',
    components: {},
    props: {
        detailData: Object,
        detailData1: Object,
        showVideo: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            mediaTab: 'img'
        };
    },
    computed: {
        images() {
            console.log("图片");
            console.log(this.detailData1);
            let images = [];
            if (this.detailData.headImgPath != null){
                images[0] = this.detailData.headImgPath;
                this.showVideo = false
            } else if (this.detailData.vehicleImage1 != null) {
                images[0] = this.detailData.vehicleImage1;
                images[1] = this.detailData.vehicleImage2;
                images[2] = this.detailData.vehicleImage3;
                images[3] = this.detailData.vehicleImage4;
            }


            // let images = this.detailData.image_path;
            // let images = this.detailData.vehicleImage1;

            console.log(images);
            return images;
            // if (images) {
            //     return images.split(',');
            // }
            // return [];
        }
    },
    watch: {
        detailData() {
            this.localVehicleDetail = null;
            this.mediaTab = 'img';
            document.getElementById('currentVideo') && document.getElementById('currentVideo').load();
        }
    },
    mounted() {

    },
    methods: {

    }
};
</script>

<style scoped>

/deep/
.el-tabs__header {
    margin: 0;
}
/deep/
.el-tabs__content {
    padding: 10px;
    border-left: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
}

</style>
